<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR USER MANUAL</h1></td></tr>
</table></td>
</tr><tr>
<td>

<h1 class=cp10><font class=cf5>Introduction</font></h1>
<p class=cp10>With CodeThatXPBar you can</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><a class=ca5 href="bar_style.html">customize style for your bar:</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><img src="img/pro.gif" width=24 height=11>&nbsp;define items opacity</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>background colors, background images, shadows, borders are supported</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>images in bar items are supported (both for plain items and submenus)</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><img src="img/pro.gif" width=24 height=11>&nbsp;alignment support</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><img src="img/pro.gif" width=24 height=11>&nbsp;XPBar appearance (and individual items) can be controlled through the CSS class</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>define items opacity</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>describes the scrollers set</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><img src="img/pro.gif" width=24 height=11>&nbsp;<a class=ca5 href="bar_beh.html">change bar behaviour</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><a class=ca5 href="bar_pos.html">define bar position:</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><img src="img/pro.gif" width=24 height=11>&nbsp;different positioning for submenus (relatively to higher menu) is supported</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>support for absolute and relative positioning</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><a class=ca5 href="bar_act.html">define the action to be excuted when the item is cliked</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><a class=ca5 href="bar_html.html">include almost any HTML code as bar's item</a></p>
<p class=cp19><img src="img/ad.gif" width=11 height=7><a class=ca5 href="bar_db.html">generate bar script from the database</a></p>
<p class=cp10><img src="img/pro.gif" width=24 height=11>&nbsp;Read <a class=ca5 href="standard_vs_pro.html?h=xpbar#xpbar">Standard vs PRO</a> to know the differences between CodeThatXPBar Standard and PRO.</p>
<p class=cp10>The configuration of the CodeThatXPBar can be stored in the separate js file.</p>
<h3 class=cp10>To describe new <font class=cf1>CodeThatXPBar</font> create an object with following structure:</h3>

<pre class=cc1>
<font class=cc3><font class=cc5>var</font> BarDef <font class=cc2>=</font> <font class=cc7>{</font></font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font>
	<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font>
	<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font> <font class=cc8>]</font>
<font class=cc7>}</font><font class=cc2>;</font> 
</pre>

<p class=cp10>where</p>

<pre class=cc1>
<font class=cc3>items <font class=cc2>-</font> submenu items
style <font class=cc2>-</font> box <font class=cc2>-</font> item<font class=cc2>/</font>box style
itemover <font class=cc2>-</font> box <font class=cc2>-</font> item style when in</font> <font class=cc6>"mouseover"</font> <font class=cc3>state
position <font class=cc2>-</font> box position <font class=cc2>(</font>either relative or absolute<font class=cc2>)</font></font>
</pre>

<h3 class=cp10>To describe <font class=cf1>an item</font> use following structure:</h3>

<pre class=cc1>
<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
<font class=cc6>"style"</font>
<font class=cc3><font class=cc7>{</font>
	css	 <font class=cc2>:</font> string				 <font class=cc2>:</font> CSS class
	size	 <font class=cc2>:</font> <font class=cc8>[</font>width<font class=cc2>,</font> height<font class=cc8>]</font>			 <font class=cc2>:</font> item width/height
	align	 <font class=cc2>:</font> string				 <font class=cc2>:</font> text alignment
						   (left/right/center/middle)
	color	 <font class=cc2>:</font> string				 <font class=cc2>:</font> color string for the text
	bgimg	 <font class=cc2>:</font> string				 <font class=cc2>:</font> url of the background image
	bgcolor	 <font class=cc2>:</font> string				 <font class=cc2>:</font> color string
	shadow	 <font class=cc2>:</font> <font class=cc7>{</font></font> <font class=cc6>"color"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font> <font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int <font class=cc7>}</font>	 <font class=cc2>:</font> shadow parameters
	border	 <font class=cc2>:</font> <font class=cc7>{</font></font> <font class=cc6>"color"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font> <font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int <font class=cc7>}</font>	 <font class=cc2>:</font> border parameters
	imgitem	 <font class=cc2>:</font> <font class=cc7>{</font></font> <font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font> <font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int <font class=cc7>}</font> <font class=cc2>:</font>
						   bullet image for
						   non-submenu (bar) or
						   plain (tree) items or
						   default bullet for
						   a menu item
	imgdir	 <font class=cc2>:</font> <font class=cc7>{</font></font>
		<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
		<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
	<font class=cc7>}</font>
	 <font class=cc2>:</font> bullet image for submenu items
	imgdiropen <font class=cc2>:</font> <font class=cc7>{</font></font>
		<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
		<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
	<font class=cc7>}</font>
	 <font class=cc2>:</font> bullet image for open submenu with items
	imgendon <font class=cc2>:</font> <font class=cc7>{</font></font>
		<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
		<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
	<font class=cc7>}</font>
	 <font class=cc2>:</font> end item bullet when in</font> <font class=cc6>"on"</font> <font class=cc3>or</font> <font class=cc6>"opened"</font> <font class=cc3>state
	imgendoff <font class=cc2>:</font> <font class=cc7>{</font></font>
		<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
		<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
	<font class=cc7>}</font>
	 <font class=cc2>:</font> end item bullet when in</font> <font class=cc6>"off"</font> <font class=cc3>or</font> <font class=cc6>"closed"</font> <font class=cc3>state
	z	 <font class=cc2>:</font> int				 <font class=cc2>:</font> z - index
	opacity	 <font class=cc2>:</font> int				 <font class=cc2>:</font> opacity
<font class=cc7>}</font><font class=cc2>,</font></font>
<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc2>...</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"styleover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc2>...</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"up"</font> <font class=cc3><font class=cc2>:</font> url<font class=cc2>,</font></font> <font class=cc6>"down"</font> <font class=cc3><font class=cc2>:</font> url<font class=cc2>,</font></font>
	<font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//scroller's height
	<font class=cc6>"step"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//step to scroll by
	<font class=cc6>"time"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//pause in milliseconds
	<font class=cc6>"len"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font>		//length in pixels to scroll
	<font class=cc6>"offset"</font> <font class=cc2>:</font> <font class=cc3>int</font>		//if scroller size smaller
				//that bar size set margin from the left side
<font class=cc7>}</font> // describes the scrollers set
<font class=cc8>]</font>
</pre>

<p class=cp10><a class=ca7 href="bar_style.html">Read more about CodeThatXPBar&nbsp;&gt;&gt;</a></p>

</td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>